<template>
  <h1>App</h1>
  <p>{{ num }}</p>
  <button @click="setNum">更新</button>

  <p>{{ person.name }}</p>
  <p>{{ times }}</p>

  <Child :num="num" @setNum="setNum" ref="child" />
</template>
<script setup lang="ts">
// 组合式API语法糖 setup: 整个script标签就是在setup函数中执行的
import { ref, reactive, computed, watch, onMounted } from 'vue';
// 引入组件，自动注册组件
import Child from "./Child.vue";

interface TodoItem {
  id: number;
  name: string; // 必填属性
  age?: number; // 可选属性
}

// type 定义类型别名
// 使用type定义新的类型，叫做TodoList
// 类型具体内容：TodoItem[]
type TodoList = TodoItem[];
// type TodoList = Array<TodoItem>;

/*
  type来定义数组类型
  interface来定义对象类型
*/

const todos = ref<TodoList>([]);

const addTodo = () => {
  todos.value.push({
    id: 1,
    name: "吃饭",
    // age: 18,
  });
};

// 定义即暴露（定义数据，会自动暴露）
const num = ref(0);

const setNum = () => {
  num.value++;
};

const person = reactive({
  name: "jack",
  age: 18,
});

const times = computed(() => num.value + "次");

const child = ref();

onMounted(() => {
  console.log("onMounted", child.value);
});
</script>
<style scoped></style>
